import React, { Component } from 'react';
import YwxNavBar from '../../components/common/YwxNavBar/YwxNavBar';
import YwxSectionView from '../../components/common/YwxSectionView/YwxSectionView';
import TaskLogItem from '../../components/TaskLog/TaskLogItem/TaskLogItem';

export default class TaskLog extends Component {

    constructor(props) {
        super(props);
        this.state = {
            pageSize: 15,
            list: [],
            noMore: false,
        }
    }

    componentDidMount() {
        this.onRefresh();
    };

    fetchData = (callback) => {
        this.isLoading = true;
        React.$utils.request({
            url: '/app/userReportRecord',
            params: {
                pageNo: this.page || 1,
                pageSize: this.state.pageSize
            }
        }).then(res => {
            this.isLoading = false;
            this.setState({
                noMore: res.length === 0,
                list: (this.page === 1 ? [] : this.state.list).concat(res)
            });
            callback && callback(res);
        }).catch(err => {
            this.isLoading = false;
        })
    };

    onRefresh = () => {
        this.page = 1;
        this.fetchData();
    };

    onEndReached = () => {
        if (this.isLoading) {
            return false
        }
        this.page++;
        this.fetchData();
    };

    render() {
        return (
            <div className='team'>
                <YwxNavBar>报件记录</YwxNavBar>
                <YwxSectionView
                    header={
                        <div>

                        </div>
                    }
                    list={this.state.list}
                    renderSectionHeader={sectionData => <div style={{ fontSize: '0.32rem' }}>{sectionData}</div>}
                    renderRow={item => (<TaskLogItem key={item.id} info={item} />)}
                    renderSeparator={(s, r) => <div key={`${s}-${r}`} style={{ height: 1, backgroundColor: '#eee' }} />}
                    onRefresh={this.onRefresh}
                    onEndReached={this.onEndReached}
                    pageSize={this.state.pageSize}
                    noMore={this.state.noMore}
                />
            </div >
        );
    }
}